<template>
<div>
    <Card>
        <Button class="ivu-mb-16" type="primary" @click="handleEdit(false)" v-hasC="{name: '-v1-vps-vps-vps-project-add',flag: '/v1/vps/vps/vps-project-add'}">新增</Button>
        <JG-table
            :params="params"
            :data="data"
            :loading="loading"
            :columns="columns"
            :total="total"
            :butshow="butshow"
            @askData="askData"
            @sortchange="sortchange"
            @handleEdit="handleEdit"
             :maxHeight="600"></JG-table>
    </Card>
    <modaladd ref="modaladd" :Vpslists="Vpslist" @askData="askData"/>
    <modaledit ref="modaledit" :Vpslists="Vpslist" @askData="askData"/>
</div>
</template>
<script>
    import modaladd from './modaladd';
    import modaledit from './modaledit';
    import { vpsvpsvpsprojectlist } from '@api/projectsetting';
    import { vpsvpsvpslist } from '@api/VPSsetting';
    export default {
        components: { modaladd, modaledit },
        name: '',
        data () {
            return {
                butshow: {
                    Edit: {
                        name: '-v1-vps-vps-vps-project-update',
                        flag: '/v1/vps/vps/vps-project-update'
                    }
                },
                loading: false,
                total: -1,
                params: { order: 'desc', type: '', page: 0, pageSize: 0 },
                paramsinitial: [1, 2, 3],
                Vpslist: [],
                columns: [
                    { title: 'ID', key: 'id', sortable: 'custom', width: 80 },
                    { title: '项目名称', key: 'project_names', sortable: 'custom', minWidth: 100 },
                    { title: '项目域名', key: 'project_domain', minWidth: 100 },
                    { title: '所属服务器', key: 'public_ip', sortable: 'custom', minWidth: 150 },
                    { title: '服务器备注', key: 'alias_name', minWidth: 200 },
                    { title: '项目状态', key: 'status', slot: 'status', sortable: 'custom', width: 110 },
                    { title: '操作', slot: 'projectsettingAction', width: 80 }
                ],
                data: []
            }
        },
        mounted () {
            this.askData()
        },
        methods: {
            initial () {
                vpsvpsvpslist({ page: 0, pageSize: 0 }).then(res => {
                    this.Vpslist = res.list
                })
            },
            askData () {
                this.loading = true
                vpsvpsvpsprojectlist(this.params).then(res => {
                    this.data = res.list
                    this.loading = false
                }).catch(() => {
                    this.loading = false;
                });
                this.initial()
            },
            handleEdit (row) {
                if (row) this.$refs.modaledit.initial(row)
                else this.$refs.modaladd.initial()
            },
            sortchange (e) {
                switch (e.sort) {
                case 1: this.params.order = 'asc'; break;
                case 2: this.params.order = 'desc'; break;
                default: break;
                }
                // console.log(e.key)
                switch (e.key) {
                case 'id': this.params.type = 1; break;
                case 'project_names': this.params.type = 2; break;
                case 'public_ip': this.params.type = 3; break;
                case 'status': this.params.type = 4; break;
                default: break;
                }
                this.askData()
            }
        }
    }
</script>
